<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2> sum : {{ sum }} </h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Person',
}
</script>
<script setup lang="ts">
import { ref, watch } from 'vue'

//数据
let sum = ref(0)

function changeSum() {
  sum.value++
}

const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum变化了', newValue, oldValue)
  if(newValue >= 10){
      stopWatch()
    }
})

</script>

<style scoped>
.person {
  background-color: pink;
  padding: 10px;
  border-color: black;
  border-style: solid;
  border-width: 2px;
}
</style>